<template>
  <div class="wrap">
    <Header></Header>
    <div class="main">
      <!-- 导航栏 -->
      <div class="nav">
        <h3 @click="goNavTarget('meiTuan')">我的美团</h3>
        <!-- 我的订单 -->
        <ul @click="goNavTarget('myOrder', $event)">
          <li><h3 data-Id="1">我的订单</h3></li>
          <li data-Id="1">
            全部订单
            <i class="arrowRight iconfont icon-arrow-right"></i>
          </li>
          <li data-Id="2">
            待付款<i class="arrowRight iconfont icon-arrow-right"></i>
          </li>
          <li data-Id="3">
            待使用<i class="arrowRight iconfont icon-arrow-right"></i>
          </li>
          <li data-Id="4">
            待评价 <span>{{ ToCommentCount }}</span
            ><i class="arrowRight iconfont icon-arrow-right"></i>
          </li>
          <li data-Id="5">
            退款/售后<i class="arrowRight iconfont icon-arrow-right"></i>
          </li>
        </ul>
        <!-- 我的收藏 -->
        <ul @click="goNavTarget('Collection')">
          <li><h3>我的收藏</h3></li>
          <li>
            收藏的商家<i class="arrowRight iconfont icon-arrow-right"></i>
          </li>
          <li>
            收藏的团购<i class="arrowRight iconfont icon-arrow-right"></i>
          </li>
        </ul>
        <!-- 抵用券 -->
        <ul @click="goNavTarget('Voucher')">
          <li><h3>抵用券</h3></li>
          <li>可用券<i class="arrowRight iconfont icon-arrow-right"></i></li>
          <li>失效券<i class="arrowRight iconfont icon-arrow-right"></i></li>
        </ul>
        <!-- 个人信息 -->
        <ul @click="goNavTarget('UserInfo')">
          <li>
            <h3>
              个人信息<i class="arrowRight iconfont icon-arrow-right"></i>
            </h3>
          </li>
          <li>账户设置<i class="arrowRight iconfont icon-arrow-right"></i></li>
        </ul>
        <div class="QRCode">
          <img
            src="https://s1.meituan.net/bs/fe-web-meituan/60ac9a0/img/download-qr.png"
            alt="美团APP手机版"
          />
          <h3>美团APP手机版</h3>
          <div>
            <span class="tips">1元起</span>
            <span>吃喝玩乐</span>
          </div>
        </div>
      </div>
      <div class="content">
        <!-- 右边内容区 -->
        <!-- 我的美团 -->
        <MyMeiTuan
          v-if="isShow === 'meiTuan'"
          @orderTarget="orderTarget"
          :ToCommentCount="ToCommentCount"
        />
        <!-- wide订单 -->
        <MyOrder
          v-else-if="isShow === 'myOrder'"
          :isShowIndex="isShowIndex"
          @orderTarget="orderTarget"
          :ToCommentCount="ToCommentCount"
        />
        <!-- 收藏，抵用券，个人信息 -->
        <div v-else style="font-size: 20px">
          正在开发中。。。。。。敬请期待！！！
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "Personal",
});
</script>
<script setup>
import { ref, watch } from "vue";
import Footer from "../../components/Footer/index.vue";
import Header from "../../components/Header/index.vue";
import MyMeiTuan from "./myMeiTuan/myMeiTuan.vue";
import MyOrder from "./myOrder/myOrder.vue";

import router from "../../router";
// 使用route对象
import { useRoute } from "vue-router";
const route = useRoute(); // 第一步

// 默认展示我的美团页面
const isShow = ref("meiTuan");

const NavFn = {
  meiTuan() {
    console.log("点击了美团");
    // isShow.value = "meiTuan";
    router.push({
      path: "/personal",
      query: {
        page: "meiTuan",
      },
    });
  },
  myOrder() {
    console.log("点击了我的订单");
    // isShow.value = "myOrder";
    router.push({
      path: "/personal",
      query: {
        page: "myOrder",
      },
    });
    // 判断index进行请求相应的数据
    // 1：全部订单，2：待付款 3：待使用 4：待评价 5：退款/售后
    // 数据状态：已关闭    已退款  已发车    待评价    已评价
    // console.log(isShowIndex.value);
    // 由于没有真实接口，自己筛选数据展示，实际要请求获得
  },
  Collection() {
    console.log("点击了收藏");
    // isShow.value = "Collection";
    router.push({
      path: "/personal",
      query: {
        page: "Collection",
      },
    });
  },
  Voucher() {
    console.log("点击了抵用券");
    // isShow.value = "Voucher";
    router.push({
      path: "/personal",
      query: {
        page: "Voucher",
      },
    });
  },
  UserInfo() {
    console.log("点击了个人信息");
    // isShow.value = "UserInfo";
    router.push({
      path: "/personal",
      query: {
        page: "UserInfo",
      },
    });
  },
};
// 点击导航切换到目标组件
const goNavTarget = (go, e) => {
  if (e) {
    isShowIndex.value = e.target.dataset.id;
  }
  // console.log(go);
  NavFn[go]();
};
// 我的订单页跳转
const orderTarget = (data) => {
  // console.log(data);
  isShowIndex.value = data[1];
  NavFn[data[0]]();
};

// 展示分类的序号
const isShowIndex = ref(1);

// 实际要请求获得待评论数量
const ToCommentCount = ref(21);
watch(
  () => route.query.page,
  (newdata) => {
    isShow.value = newdata;
  },
  { immediate: true }
);
</script>
<style lang="less" scoped>
.wrap {
  background-color: #f8f8f8;
  width: 100%;
  height: 100%;
  .main {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .nav {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    width: 200px;
    padding: 10px;
    height: 800px;
    margin-right: 10px;
    h3 {
      font-size: 16px;
      color: #222222;
      font-weight: 500;
      cursor: pointer;
      &:hover {
        color: #fe8c00;
      }
    }
    ul {
      font-size: 14px;
      color: #666;
      li {
        margin: 15px 0;
        cursor: pointer;
      }
    }
    .QRCode {
      padding-top: 50px;
      width: 100%;
      display: flex;
      flex-direction: column;
      text-align: center;
      align-items: center;
      img {
        width: 50%;
        height: 50%;
      }
      .tips {
        color: rgb(247, 74, 74);
      }
      h3 {
        &:hover {
          color: #000;
          cursor: default;
        }
      }
    }
  }
  .content {
    width: 980px;
    // background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
  }
}
// 右小箭头
.arrowRight {
  width: 20px;
  height: 10px;
  float: right;
  padding-right: 10px;
}
</style>
